<template>
  <div class="profile">
    <acManageTitle v-show="!undefined">
      <template #right>
        <span class="rightName">档案统计页面</span>
      </template>
    </acManageTitle>
    <div class="centerBox">
      <div class="Actiontitle">档案追踪</div>
      <div class="searchBox">
        <h4 style="text-align: center; height: 15px; line-height: 15px;margin-top: 10px;">搜索</h4>
        <span>姓名：<input type="text" placeholder="请输入姓名" /></span>
        <span>志愿者：<input type="text" placeholder="请输入姓名/编号" /></span>
        <span>年龄：<input type="text" placeholder="请输入年龄" /></span>
        <span>教师：<input type="text" placeholder="请输入姓名" /></span>
        <span>地区：<input type="text" placeholder="请输入地区" /></span>
        <div class="btn">
          <button class="btn1">搜索</button>
          <button class="btn2">清空</button>
        </div>
      </div>
      <div class="childProfile">
        <pcProfile>
          <template #avatar>
            <router-link to="/profileDetail">
              <img src="@/assets/image/lili.jpg" />
            </router-link>
          </template>
          <template #careP>
            <span class="rightDes">莉莉（化名）</span>
          </template>
          <template #gender>
            <span class="rightDes">女</span>
          </template>
          <template #age>
            <span class="rightDes">15</span>
          </template>
          <template #parent>
            <span class="rightDes">苏保平</span>
          </template>
          <template #teacher>
            <span class="rightDes">张俊华</span>
          </template>
          <template #neicom>
            <span class="rightDes">楚江街道荷花社区居委会</span>
          </template>
          <template #info>
            <span class="uprightDes"
              >莉莉是一名五年级的小学生。
              从小到大，身体、智力发育正常，无不良嗜好，
              在受害之前，性格偏外向。长相较为清秀，比较乖巧老
              实。衣着整洁，谈吐清晰，略显拘束，有紧张情绪。语
              调适中，在叙述过去和现在的生活时，表现出的情绪有明显
              变化。来访者求助愿望强烈。</span
            >
          </template>
          <template #fam>
            <span class="uprightDes"
              >莉莉出生于一个高知家庭，经济条件较好。父母都是教师，家庭教育比较积极正面，平时父母对其学习要求严格并寄予厚望。从小到大，莉莉一直认为学习成绩才是最重要的，优异的成绩能够让她获得老师、父母、亲戚朋友的赞许。</span
            >
          </template>
          <template #edu>
            <span class="uprightDes"
              >在上小学期间，莉莉都是一名学业优秀的学生，曾获得“三好学生”等多项荣誉称号。在一次考试当中成绩下降，后来成绩一直较差。在学校里，莉莉的班主任是一名语文老师，挺欣赏她，任命她为班干部。在成绩下降以后，老师曾多次找莉莉谈话，但多次交流无果。莉莉正处于小学阶段，还不太意识到性教育方面的问题。学校老师也从未引导同学们学习该方面的知识，所以青春健康教育严重匮乏。</span
            >
          </template>
        </pcProfile>
        <pcProfile>
          <template #avatar>
            <img src="@/assets/image/jingjing.png" />
          </template>
          <template #careP>
            <span class="rightDes">静静（化名）</span>
          </template>
          <template #gender>
            <span class="rightDes">女</span>
          </template>
          <template #age>
            <span class="rightDes">13</span>
          </template>
          <template #parent>
            <span class="rightDes">杨成（父）、王梅（母）</span>
          </template>
          <template #teacher>
            <span class="rightDes">李林</span>
          </template>
          <template #neicom>
            <span class="rightDes">和平街道科大社区</span>
          </template>
          <template #info>
            <span class="uprightDes"
              >初二年级学生。从小到大，身体、智力发育正常，
              无不良嗜好，性格偏内向。通过课堂观察初始印象
              为长相较为清秀，言行举止比较小心谨慎，比较乖
              巧老实，但衣着有些不整。在抽查谈话时回答问题
              温吞缓慢，略显拘束，有紧张情绪。回答关于校园
              暴力问题时眼神躲闪，语序凌乱，手足无措，表情
              慌张恐惧。在叙述过去和现在的生活时，表现出的
              情绪有明显变化。</span
            >
          </template>
          <template #fam>
            <span class="uprightDes"
              >静静出生于一个农村家庭，经济条件困难。父母
              都是进城务工农民，家庭教育固守传统，平时父
              母关系不好，初中后更是总在孩子面前因为鸡毛
              蒜皮的小事争吵不断。父亲有酗酒、家暴倾向，
              母亲时常向静静哭泣、诉苦。</span
            >
          </template>
          <template #edu>
            <span class="uprightDes"
              >在小学，静静一直都是学业优秀的学生，并被
              顺利保送到本部的初中。在初中，静静的班主任
              是一位地理老师，平时较为注重成绩，对同学们
              平常生活、心理状况了解较少，对同学们之间的
              关系、产生的矛盾处理不上心，不论对错的偏袒
              成绩较好的一方。因此静静遭到同学们的孤立， 甚至是校园暴力。</span
            >
          </template>
        </pcProfile>
        <pcProfile>
          <template #avatar>
            <img src="@/assets/image/xiaoyu.png" />
          </template>
          <template #careP>
            <span class="rightDes">小鱼（化名）</span>
          </template>
          <template #gender>
            <span class="rightDes">女</span>
          </template>
          <template #age>
            <span class="rightDes">13</span>
          </template>
          <template #parent>
            <span class="rightDes">周志光</span>
          </template>
          <template #teacher>
            <span class="rightDes">刘丽</span>
          </template>
          <template #neicom>
            <span class="rightDes">益民小区居委会</span>
          </template>
          <template #info>
            <span class="uprightDes"
              >小鱼就读于某校六年级。身体形态较差，驼背，
              性格内向，不自信。在团辅交流过程中不敢与其
              他人对视，很害怕别人对她过于关注。她看上去
              比同年龄的孩子成熟一些，但有些像男孩子。综
              合小鱼的情况，初步判断为青春初期不能悦纳自
              己的体形外貌，甚至可能是不能悦纳自己的性身份。</span
            >
          </template>
          <template #fam>
            <span class="uprightDes"
              >小鱼的爸爸妈妈在她小学四年级时离婚，爸爸
              偶尔来学校看她，基本都是避着妈妈的。小鱼的
              爸爸已经重组家庭，因此小鱼见到爸爸并没有特
              别高兴，小鱼的妈妈至今独身一人，和小鱼的外
              婆一起带着小鱼生活。小鱼的家庭关系不佳,父母
              婚后争吵不断。在怀小鱼时,母亲抑郁和焦虑情绪
              就非常严重,导致胎儿未足月就剖腹产下小鱼。在
              生下孩子后,母亲也总是郁郁寡欢,沉浸在负面情绪
              中出不来,没能很好地履行母亲的职责。小鱼的父亲
              经常早出晚归,很少时间照顾孩子。5岁前,小鱼的主
              要抚养者是外婆,而外婆脾气暴躁,对孩子缺乏耐心。
              5岁时,父母离异,小鱼随母亲一起生活。直到14岁,
              小鱼与父亲很少见面和交流。</span
            >
          </template>
          <template #edu>
            <span class="uprightDes"
              >在某初中读初一，成绩一般。青春期，是让绝大多
              数家长都非常头疼的一个阶段，也是孩子必须经历的
              一个阶段。而最让家长头疼的，往往是经常和青春期
              绑定的另一个词：叛逆。</span
            >
          </template>
        </pcProfile>
      </div>
    </div>
  </div>
</template>
<script>
import acManageTitle from '@/components/acManageTitle.vue'
import pcProfile from '@/components/pcProfile.vue'
export default {
  components: {
    acManageTitle: acManageTitle,
    pcProfile: pcProfile
  }
}
</script>
<style lang="less" scoped>
.rightName {
  font-size: 0.52rem;
  color: #fbb40a;
}
.rightDes {
  color: #fff;
  font-size: 12px;
}
.uprightDes {
  color: #fff;
  font-size: 10px;
}
.profile {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-image: url('@/assets/image/背景.png');
  background-size: 100% 100%;
  background-color: rgba(128, 1, 1, 1);
  .centerBox {
    width: 100%;
    height: 100%;
    position: relative;
    //margin-bottom: 0.25rem;
    //padding-bottom: 0.25rem;
    border-style: solid;
    border-width: 1px;
    border-color: #ff000e;
    border-radius: 15px;
    .Actiontitle {
      width: 100%;
      margin-bottom: 30px;
      background-image: url('@/assets/image/导航.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      text-align: center;
      font: normal 500 22px 'monospace';
      line-height: 1rem;
      color: rgb(255, 255, 255);
    }
    .searchBox {
      position: absolute;
      right: 5vh;
      top: 50%;
      transform: translateY(-50%);
      width: 20vw;
      height: 60vh;
      background-color: rgba(128, 1, 1, 1);
      border: 1px solid #f5d858;
      border-radius: 2vh;
      color: #fff;
      span {
        display: block;
        width: 100%;
        margin: 5vh 10px;
        input {
          width: 100px;
          border: 1px solid #ff000e;
          background-color: transparent;
          border-radius: 4px;
        }
        input::-webkit-input-placeholder {
          color: rgba(255, 255, 255, 0.6);
          font-size: 12px;
        }
        input::-moz-placeholder {
          /* Mozilla Firefox 19+ */
          color: rgba(255, 255, 255, 0.6);
          font-size: 12px;
        }
        input:-moz-placeholder {
          /* Mozilla Firefox 4 to 18 */
          color: rgba(255, 255, 255, 0.6);
          font-size: 12px;
        }
        input:-ms-input-placeholder {
          /* Internet Explorer 10-11 */
          color: rgba(255, 255, 255, 0.6);
          font-size: 12px;
        }
      }
      .btn {
        position: absolute;
        bottom: 20%;
        right: 10px;
        .btn1,
        .btn2 {
          border: 0;
          outline: none;
          background-color: #d37401;
          margin-right: 10px;
          width: 40px;
          border-radius: 5px;
          color: #fff;
        }
      }
    }
    .childProfile {
      display: block;
      position: absolute;
      left: 0;
      top: 1rem;
      width: 70vw;
      height: 100vh;
      //background-color: #b41e1d;
      overflow-y: auto;
    }
  }
}
img {
  width: 120px;
  height: 160px;
}
</style>
